<template>
  <div class="app-container">
    <!-- 统计概览卡片 -->
    <el-row :gutter="20" class="mb20">
      <el-col :span="6">
        <el-card class="statistics-card" shadow="hover">
          <div class="statistics-item">
            <div class="statistics-icon revenue">
              <el-icon><Money /></el-icon>
            </div>
            <div class="statistics-content">
              <div class="statistics-value">¥{{ totalRevenue.toLocaleString() }}</div>
              <div class="statistics-label">总收益</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="statistics-card" shadow="hover">
          <div class="statistics-item">
            <div class="statistics-icon orders">
              <el-icon><Document /></el-icon>
            </div>
            <div class="statistics-content">
              <div class="statistics-value">{{ totalOrders.toLocaleString() }}</div>
              <div class="statistics-label">总订单数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="statistics-card" shadow="hover">
          <div class="statistics-item">
            <div class="statistics-icon drivers">
              <el-icon><User /></el-icon>
            </div>
            <div class="statistics-content">
              <div class="statistics-value">{{ activeDrivers.toLocaleString() }}</div>
              <div class="statistics-label">活跃司机</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="statistics-card" shadow="hover">
          <div class="statistics-item">
            <div class="statistics-icon vehicles">
              <el-icon><Truck /></el-icon>
            </div>
            <div class="statistics-content">
              <div class="statistics-value">{{ activeVehicles.toLocaleString() }}</div>
              <div class="statistics-label">运营车辆</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 筛选条件 -->
    <el-card class="filter-card" shadow="never">
      <el-form :model="queryParams" :inline="true" label-width="80px">
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            @change="handleDateChange"
          />
        </el-form-item>
        <el-form-item label="统计维度">
          <el-select v-model="queryParams.dimension" @change="handleQuery">
            <el-option label="按日统计" value="day" />
            <el-option label="按周统计" value="week" />
            <el-option label="按月统计" value="month" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          <el-button type="success" icon="Download" @click="handleExport">导出报表</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 图表区域 -->
    <el-row :gutter="20">
      <!-- 收益趋势图 -->
      <el-col :span="12">
        <el-card title="收益趋势" shadow="never">
          <div class="chart-container">
            <div id="revenueChart" style="width: 100%; height: 300px; background: #f8f9fa; display: flex; align-items: center; justify-content: center;">
              <span style="color: #999;">收益趋势图表 (待集成图表组件)</span>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <!-- 订单量趋势图 -->
      <el-col :span="12">
        <el-card title="订单量趋势" shadow="never">
          <div class="chart-container">
            <div id="orderChart" style="width: 100%; height: 300px; background: #f8f9fa; display: flex; align-items: center; justify-content: center;">
              <span style="color: #999;">订单量趋势图表 (待集成图表组件)</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 详细数据表格 -->
    <el-card class="mt20" shadow="never">
      <template #header>
        <div class="card-header">
          <span>详细统计数据</span>
        </div>
      </template>
      
      <el-table v-loading="loading" :data="statisticsList" stripe>
        <el-table-column label="日期" align="center" prop="date" width="120" />
        <el-table-column label="订单数量" align="center" prop="orderCount" width="120">
          <template #default="scope">
            {{ scope.row.orderCount.toLocaleString() }}
          </template>
        </el-table-column>
        <el-table-column label="完成订单" align="center" prop="completedOrders" width="120">
          <template #default="scope">
            {{ scope.row.completedOrders.toLocaleString() }}
          </template>
        </el-table-column>
        <el-table-column label="取消订单" align="center" prop="cancelledOrders" width="120">
          <template #default="scope">
            {{ scope.row.cancelledOrders.toLocaleString() }}
          </template>
        </el-table-column>
        <el-table-column label="总收益" align="center" prop="revenue" width="150">
          <template #default="scope">
            <span class="revenue-text">¥{{ scope.row.revenue.toLocaleString() }}</span>
          </template>
        </el-table-column>
        <el-table-column label="平台抽成" align="center" prop="platformFee" width="150">
          <template #default="scope">
            ¥{{ scope.row.platformFee.toLocaleString() }}
          </template>
        </el-table-column>
        <el-table-column label="司机收入" align="center" prop="driverIncome" width="150">
          <template #default="scope">
            ¥{{ scope.row.driverIncome.toLocaleString() }}
          </template>
        </el-table-column>
        <el-table-column label="平均单价" align="center" prop="avgPrice" width="120">
          <template #default="scope">
            ¥{{ scope.row.avgPrice.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column label="活跃司机" align="center" prop="activeDriverCount" width="120" />
        <el-table-column label="活跃车辆" align="center" prop="activeVehicleCount" width="120" />
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Money, Document, User, Truck } from '@element-plus/icons-vue'

// 页面标题
defineOptions({ name: 'RideStatistics' })

// 响应式数据
const loading = ref(true)
const total = ref(0)
const statisticsList = ref([])
const dateRange = ref([])

// 统计概览数据
const totalRevenue = ref(1256789)
const totalOrders = ref(8456)
const activeDrivers = ref(234)
const activeVehicles = ref(189)

// 查询参数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  startDate: '',
  endDate: '',
  dimension: 'day'
})

// 查询统计数据
const getList = async () => {
  loading.value = true
  try {
    // 模拟数据
    const mockData = {
      list: [
        {
          date: '2024-01-10',
          orderCount: 156,
          completedOrders: 142,
          cancelledOrders: 14,
          revenue: 12580,
          platformFee: 2516,
          driverIncome: 10064,
          avgPrice: 80.64,
          activeDriverCount: 45,
          activeVehicleCount: 38
        },
        {
          date: '2024-01-09',
          orderCount: 189,
          completedOrders: 175,
          cancelledOrders: 14,
          revenue: 15670,
          platformFee: 3134,
          driverIncome: 12536,
          avgPrice: 82.91,
          activeDriverCount: 52,
          activeVehicleCount: 41
        },
        {
          date: '2024-01-08',
          orderCount: 134,
          completedOrders: 128,
          cancelledOrders: 6,
          revenue: 10890,
          platformFee: 2178,
          driverIncome: 8712,
          avgPrice: 81.27,
          activeDriverCount: 38,
          activeVehicleCount: 32
        }
      ],
      total: 3
    }
    statisticsList.value = mockData.list
    total.value = mockData.total
  } catch (error) {
    ElMessage.error('获取统计数据失败')
  } finally {
    loading.value = false
  }
}

// 日期范围变化
const handleDateChange = (dates: string[]) => {
  if (dates && dates.length === 2) {
    queryParams.startDate = dates[0]
    queryParams.endDate = dates[1]
  } else {
    queryParams.startDate = ''
    queryParams.endDate = ''
  }
}

// 查询
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

// 重置
const resetQuery = () => {
  dateRange.value = []
  queryParams.startDate = ''
  queryParams.endDate = ''
  queryParams.dimension = 'day'
  handleQuery()
}

// 导出报表
const handleExport = () => {
  ElMessage.info('导出报表功能待实现')
}

// 页面加载时获取数据
onMounted(() => {
  getList()
})
</script>

<style scoped>
.mb20 {
  margin-bottom: 20px;
}

.mt20 {
  margin-top: 20px;
}

.filter-card {
  margin-bottom: 20px;
}

.statistics-card {
  height: 120px;
}

.statistics-item {
  display: flex;
  align-items: center;
  height: 100%;
}

.statistics-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 24px;
  color: white;
}

.statistics-icon.revenue {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.statistics-icon.orders {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.statistics-icon.drivers {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.statistics-icon.vehicles {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.statistics-content {
  flex: 1;
}

.statistics-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  line-height: 1;
}

.statistics-label {
  font-size: 14px;
  color: #909399;
  margin-top: 8px;
}

.chart-container {
  padding: 20px;
}

.revenue-text {
  color: #67c23a;
  font-weight: bold;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>